<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org" >
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="renderer" content="webkit">

    <title>自动气象站数据实时信息发布系统</title>

    <meta name="keywords" content="">
    <meta name="description" content="">

    <!--[if lt IE 9]>
    <meta http-equiv="refresh" content="0;ie.html" />
    <![endif]-->

    <link rel="shortcut icon" href="favicon.ico" th:href="@{/favicon.ico}">
    <link href="css/bootstrap.min.css?v=3.3.6" th:href="@{/css/bootstrap.min.css?v=3.3.6}" rel="stylesheet">
    <link href="css/font-awesome.min.css?v=4.4.0" th:href="@{/css/font-awesome.min.css?v=4.4.0}" rel="stylesheet">
    <link href="css/animate.css" th:href="@{/css/animate.css}" rel="stylesheet">
    <link href="css/style.css?v=4.1.0" th:href="@{/css/style.css?v=4.1.0}" rel="stylesheet">

    <!-- Data Tables -->
    <link href="css/plugins/dataTables/dataTables.bootstrap.css"  th:href="@{/css/plugins/dataTables/dataTables.bootstrap.css}" rel="stylesheet">
    <link href="css/animate.css" th:href="@{/css/animate.css}" rel="stylesheet">
    <link href="css/style.css?v=4.1.0" th:href="@{/css/style.css?v=4.1.0}" rel="stylesheet">

    <!-- 全局js -->
    <script src="js/jquery.min.js?v=2.1.4" th:src="@{/js/jquery.min.js?v=2.1.4}"></script>
    <script src="js/bootstrap.min.js?v=3.3.6" th:src="@{/js/bootstrap.min.js?v=3.3.6}" ></script>
    <script src="js/plugins/metisMenu/jquery.metisMenu.js" th:src="@{/js/plugins/metisMenu/jquery.metisMenu.js}"></script>
    <script src="js/plugins/slimscroll/jquery.slimscroll.min.js" th:src="@{/js/plugins/slimscroll/jquery.slimscroll.min.js}"></script>
    <script src="js/plugins/layer/layer.min.js" th:src="@{/js/plugins/layer/layer.min.js}" ></script>
    <!-- 第三方插件 -->
<!--    <script src="js/plugins/pace/pace.min.js" th:src="@{/js/plugins/pace/pace.min.js}"></script>-->
<!--    /Users/zzw/文档/前端模板/Inspinia_admin/js/plugins/pace/pace.min.js-->
    <script src="../static/js/jquery-ui.custom.min.js" th:src="@{/js/jquery-ui.custom.min.js}" ></script>
    <script src="../static/js/jquery-ui-1.10.4.min.js" th:src="@{/js/jquery-ui-1.10.4.min.js}"></script>

    <!-- 自定义js -->
    <script src="js/hAdmin.js?v=4.1.0" th:src="@{/js/hAdmin.js?v=4.1.0}"></script>
<!--    <script src="http://cdn.datatables.net/1.10.21/css/jquery.dataTables.min.css" th:src="@{http://cdn.datatables.net/1.10.21/css/jquery.dataTables.min.css}"></script>-->
<!--    <script src="http://cdn.datatables.net/1.10.21/js/jquery.dataTables.min.js" th:src="@{http://cdn.datatables.net/1.10.21/js/jquery.dataTables.min.js}"></script>-->

<!--    1000-->

    <script src="js/plugins/jeditable/jquery.jeditable.js" th:src="@{/js/plugins/jeditable/jquery.jeditable.js}" ></script>

    <!-- Data Tables -->
    <script src="js/plugins/dataTables/jquery.dataTables.js" th:src="@{/js/plugins/dataTables/jquery.dataTables.js}" ></script>
    <script src="js/plugins/dataTables/dataTables.bootstrap.js" th:src="@{/js/plugins/dataTables/dataTables.bootstrap.js}" ></script>

    <!-- 自定义js -->

    <!--    2000-->
</head>

<body class="fixed-sidebar full-height-layout gray-bg" style="overflow:hidden">
<div id="wrapper">
    <!--左侧导航开始-->
    <div th:replace="include/left_navigation_bar::left_navigation_bar_style"></div>
    <!--左侧导航结束-->
    <!--右侧部分开始-->
    <div id="page-wrapper" class="gray-bg dashbard-1">

        <!--头部导航开始-->
        <div th:replace="include/head::head_style"></div>
        <!--头部导航结束-->
        <div class="row J_mainContent" id="content-main">
            <div class="col-sm-12" >
                <div class="ibox-title">
                    <h5>气象数据管理</h5>
                    <div class="ibox-tools">
<!--
                        <button  title="Create new cluster" class="btn btn-primary btn-sm" data-toggle='modal' onclick="openAddUser()" data-target='#addUserModal' >
                            <i class="fa fa-plus"></i>
                            <span class="bold">新增</span>
                        </button>
-->
<!--                        <button type='button' class='btn btn-primary btn-xs'  data-toggle='modal' data-target='#myModal' onclick="+"update("+id+")"+">修改</button-->
                        <!--                        <a href="projects.html" class="btn btn-primary btn-xs">创建新用户</a>-->
                    </div>
                </div>
            </div>

            <table id="data_table_name_list" class="table table-striped table-bordered table-hover dataTables-example" >
                <thead>
                    <tr>
                        <th> id</th>
                        <th> 城市</th>
                        <th> 天气</th>
                        <th> 气温</th>
                        <th> 气压</th>
                        <th> 风力</th>
                        <th> 风向</th>
                        <th> 湿度</th>
                        <th> 修改时间</th>
                        <th> 操作</th>
                    </tr>
                </thead>
            </table>


        </div>
    </div>
    <!--右侧部分结束-->
</div>



<script>
    $(document).ready( function () {
        // 表单初始化
        dataTableInit();

    } );


    function dataTableInit(){
        $('#data_table_name_list').DataTable({
            "processing":true,
            "serverSide":false,
            "pageLength": 10,  //首次加载的数据条数
            "ordering": false, //排序操作在服务端进行，所以可以关了。
            "paging":true,
            "pagingType": "full_numbers",
            // "autoWidth": true,
            "searching": false,//禁用搜索
//                    "showRefresh":true,
            "ajax":{
                "url":"/meteorologicalData/findAll",
                "type":"post",
                "data": function (d){

                }
            },
            "columns":[
                {"data":'id'},
                {"data":'city'},
                {"data":'weather'},
                {"data":'airTemperature'},
                {"data":'pressure'},
                {"data":'windPower'},
                {"data":'windDirection'},
                {"data":'humidity'},
                {"data":'updateTime',
                    render : function (data,type,row) {
                        let d = new Date(data);
                        let date = (d.getFullYear()) + "-" +
                            (d.getMonth() + 1) + "-" +
                            (d.getDate()) + " " +
                            (d.getHours()) + ":" +
                            (d.getMinutes()) + ":" +
                            (d.getSeconds());
                        return date;
                    }
                }
            ],
            "columnDefs":[
                {
                    "targets" : 9,//操作按钮目标列
                    "data":null,
                    "render" : function(data, type, row) {
                        let id = '"' + data.id + '"';
                        let html = "<button type='button' class='btn btn-primary btn-xs'  data-toggle='modal' data-target='#myModal' onclick="+"toUpdate("+id+")"+">修改</button>"
                        + "&nbsp;&nbsp;&nbsp;<button type='button' class='btn btn-primary btn-xs'  data-toggle='modal' data-target='#myModal' onclick="+"remove("+id+")"+">删除</button>";
                        return html;
                    }

                }
            ],
/*
            language: {
                "sProcessing": "处理中...",
                "sLengthMenu": "显示 _MENU_ 项结果",
                "sZeroRecords": "没有匹配结果",
                "sInfo": "显示第 _START_ 至 _END_ 项结果，共 _TOTAL_ 项",
                "sInfoEmpty": "显示第 0 至 0 项结果，共 0 项",
                "sInfoFiltered": "(由 _MAX_ 项结果过滤)",
                "sInfoPostFix": "",
                "sSearch": "搜索:",
                "sUrl": "",
                "sEmptyTable": "表中数据为空",
                "sLoadingRecords": "载入中...",
                "sInfoThousands": ",",
                "oPaginate": {
                    "sFirst": "首页",
                    "sPrevious": "上页",
                    "sNext": "下页",
                    "sLast": "末页"
                },
                "oAria": {
                    "sSortAscending": ": 以升序排列此列",
                    "sSortDescending": ": 以降序排列此列"
                }
            }
*/
        });
    }

    //刷新数据,方法无须更改可以直接复用
    function RefreshTable(tableId, urlData){
        $.getJSON(urlData, null, function( json )
        {
            table = $(tableId).dataTable();
            oSettings = table.fnSettings();
            table.fnClearTable(this);//动态刷新关键部分语句，只会根据后台数据有变化才会刷新
            for (var i=0; i<json.length; i++)
            {
                table.oApi._fnAddData(oSettings, json[i]);//注意取得的jason串的字符数量，要与html中列的数量要有对应
            }
            oSettings.aiDisplay = oSettings.aiDisplayMaster.slice();
            table.fnDraw();
        });
    }

    function toUpdate(id){
        console.log("/meteorologicalData/toUpdate?id="+id);
        window.location.href = "/meteorologicalData/toUpdate?id="+id;
    }

    function remove(id){
        // let logoutButton = document.getElementById("logout_button");
        // $('#logout_button').on('click', function(){
            layer.confirm('是否确定删除？', {
                    btn: ['是','否'] ,//按钮
                    icon:2,
                },
                function(){
                    // parent.window.location = "/logout"
                    let url = "/meteorologicalData/invalidById";
                    let reqParameters = {
                        id:id
                    };
                    $.post(url,reqParameters,function (resp){
                        if (resp.code == 200){
                            location.reload();
                        }
                    });
                });
       // });

    }

</script>
<div style="text-align:center;"></div>


</body>

</html>
